<template>
  <div>
    <a-row>
      <a-col :offset="6" :span="10">
        <a-card title="新增收款">
          <a-form v-bind="layout">
            <a-form-item label="选择客户" required v-bind="validateInfos.customerId">
              <CustomerSelection ref="csRef" :preload="true" @customerSelected="customerSelected" />
            </a-form-item>
            <a-form-item label="金额" v-bind="validateInfos.amount">
              <a-input-number v-model:value="newReceiptParam.amount" :min="1" />
            </a-form-item>
            <a-form-item label="发生日期" v-bind="validateInfos.occurredAt">
              <a-date-picker v-model:value="newReceiptParam.occurredAt" valueFormat="yyyy-MM-DD" />
            </a-form-item>

            <a-form-item :wrapper-col="{ span: 14, offset: 8 }">
              <a-button type="primary" @click="addReceipt">确定</a-button>
              <a-button style="margin-left: 30px" @click="reset">重置</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { useReceiptAddFunctions } from '@/views/finance/receipt/add/receiptAddFuntions'
import CustomerSelection from '@/components/chunfeng/customer/CustomerSelection.vue'

const { addReceipt, newReceiptParam, validateInfos, reset, customerSelected, csRef, layout } =
  useReceiptAddFunctions()
</script>
